<!--
 * @Descripttion: 编辑拼团规则
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 18:09:24
-->
<template>
  <div class="lb-assemble-manage">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <div class="form-search">
        <el-form
          @submit.native.prevent
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
        >
          <el-form-item label="请选择规格" prop="spe_price_id">
            <el-select v-model="ruleForm.spe_price_id" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.spe_price_id"
                :label="item.spe_content"
                :value="item.spe_price_id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="成团人数" prop="people">
            <el-input
              v-model.number="ruleForm.people"
              placeholder="请输入成团人数"
            ></el-input>
          </el-form-item>
          <el-form-item label="起购数量" prop="number">
            <el-input
              v-model.number="ruleForm.number"
              placeholder="请输入起购数量"
            ></el-input>
          </el-form-item>
          <el-form-item label="单价" prop="price">
            <el-input-number
              class="lb-input-number"
              v-model="ruleForm.price"
              :controls="false"
              :precision="2"
              :min="0"
              placeholder="请输入单价"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="限购" prop="limit">
            <el-radio-group v-model="ruleForm.limit">
              <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
              <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            </el-radio-group>
            <lb-tool-tips
              >限购开启时, 每个客户此拼团条件只能开团或者参团一次</lb-tool-tips
            >
          </el-form-item>
          <el-form-item>
            <lb-button type="primary" @click="submitForm">{{
              $t('action.submit')
            }}</lb-button>
            <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import {reg} from '@/utils/reg'

export default {
  data () {
    return {
      navTitle: '',
      ruleForm: {
        spe_price_id: '',
        people: '',
        number: '',
        price: '',
        limit: 0,
        goods_id: '',
        id: ''
      },
      rules: {
        spe_price_id: { required: true, message: '请选择规格', trigger: 'change' },
        people: { required: true, message: '请输入数字', type: 'number', trigger: 'blur' },
        number: { required: true, message: '请输入数字', type: 'number', trigger: 'blur' },
        price: { required: true, message: '请输入金额', trigger: 'blur' },
        limit: { required: true, message: '请选择限购', trigger: 'change' }
      },
      options: []
    }
  },
  created () {
    // id => 商品ID  cid => 规格ID
    let { id, cid } = this.$route.query
    this.navTitle = this.$t(cid ? 'menu.AssembleManage' : 'menu.AddAssembleManage')
    if (id) this.ruleForm.goods_id = id
    if (cid) {
      this.ruleForm.id = cid
      this.getAssembleInfo()
    }
    this.getAssembleOptions()
  },
  methods: {
    /**
     * @method 获取拼团信息
     */
    getAssembleInfo () {
      let { id } = this.ruleForm
      this.editAssembleInfo('get', { id })
    },

    /**
     * @method 保存提交拼团信息
     */
    submitForm () {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          let { ruleForm } = this
          if (ruleForm.id) {
            this.editAssembleInfo('save', ruleForm)
          } else {
            this.addAssembleInfo(ruleForm)
          }
        } else {
          return false
        }
      })
    },

    /**
     * @method 拼团信息回显、编辑、添加
     */
    editAssembleInfo (type, querys) {
      this.$api.editOrDelGoodsAssemble(querys).then(res => {
        console.log(res)
        if (res.code === 200) {
          if (type === 'get') {
            this.ruleForm.spe_price_id = res.data.spe_price_id
            this.ruleForm.people = res.data.people
            this.ruleForm.number = res.data.number
            this.ruleForm.price = res.data.price
            this.ruleForm.limit = res.data.limit
          } else {
            this.$message.success(this.$t('tips.successSave'))
            this.$router.back(-1)
          }
        }
      })
    },

    /**
     * @method 添加拼团信息
     */
    addAssembleInfo (querys) {
      this.$api.addAssembleInfo(querys).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.$message.success(this.$t('tips.successSave'))
          this.$router.back(-1)
        }
      })
    },

    /**
     * @method 获取下拉框的值（规格）
     */
    getAssembleOptions () {
      this.$api.getAssembleOptions({ goods_id: this.ruleForm.goods_id }).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.options = res.data
        }
      })
    },

    /**
     * @method 返回上一页
     */
    goBack () {
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-assemble-manage {
  .form-search {
    padding: 20px;
    .el-form {
      width: 100%;
      .el-form-item {
        margin-bottom: 24px;
        .el-select,
        .el-input-number,
        .el-input {
          width: 300px;
        }
      }
      .last-form-item {
        margin-top: 30px;
      }
    }
  }
}
</style>
